<%@ include file="../shared/standardDirectives.jspf" %>
<div class="demo" id="tabs-3">
	<html:form action="/route/search.do">
		<table  border="1">
			<thead>
				<tr>
					<th align="left">Plan Your Journey</th>
					<th align="left">Search Result</th>
					<th align="left">Route Map</th>
				</tr>
			</thead>
			<tr valign="top">
				<td>
					<table  border="0">
						<tbody>
							<tr>
								<th align="right">From:</th>
								<td>
									<html:hidden name="searchRouteForm" property="from" styleId="from"/>
									<html:text name="searchRouteForm" property="fromStr" styleId="fromStr" />
								</td>
								<td>
									<html:select property="originType" styleClass="input">
										<html:optionsCollection property="types" label="name" value="id" />
									</html:select>
								</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<th align="right">To:</th>
								<td>
									<html:hidden name="searchRouteForm" property="to" styleId="to"/>
									<html:text name="searchRouteForm" property="toStr" styleId="toStr"/>
								</td>
								<td>
									<html:select property="destinationType" styleClass="input">
										<html:optionsCollection property="types" label="name" value="id" />
									</html:select>
								</td>
								<td>&nbsp;</td>
							</tr>
							<tr><td colspan="3"></td></tr>
							<tr>
								<td>&nbsp;</td>
								<td colspan="3">
									<table>
										<tr>
											<td width="40" align="center"><html:img src="../../images/icon-tube.gif"/></td>
											<td width="40" align="center"><html:img src="../../images/icon-buses.gif"/></td>
											<td width="40" align="center"><html:img src="../../images/icon-bike.gif"/></td>
											<td width="40" align="center"><html:img src="../../images/icon-walk.gif"/></td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td colspan="3">
									<table>
										<tr>
											<td width="40" align="center"><html:checkbox property="modes" value="0"></html:checkbox></td>
											<td width="40" align="center"><html:checkbox property="modes" value="1" disabled="true"></html:checkbox></td>
											<td width="40" align="center"><html:checkbox property="modes" value="2" disabled="true"></html:checkbox></td>
											<td width="40" align="center"><html:checkbox property="modes" value="3" disabled="true"></html:checkbox></td>
										</tr>
									</table>
								</td>
							</tr>
						</tbody>
						<tfoot>
							<tr>
								<td colspan="1">&nbsp;</td>
								<td align="right">
									<table>
										<tr align="right">
											<td colspan="1" align="right"> <html:submit>Search</html:submit></td>
										</tr>
									</table>
								</td>
								<td align="right">
									<table>
										<tr align="right">
											<td colspan="1" align="right"><button id="ajaxSearch">AJAX SEARCH</button> </td>
										</tr>
									</table>
								</td>
							</tr>
							
						</tfoot>
					</table>
				</td>
				<td>
					<table  border="1">
						<c:if test="${! empty searchRouteForm && searchRouteForm.result ne null}">
							<c:forEach var="path" items="${searchRouteForm.result.path}" varStatus="status">
								<tr>
									<td><c:out value="${path.name}"></c:out></td>
									<td><c:out value="${path.routeCode}"></c:out></td>
								</tr>
							</c:forEach>
							</c:if>
					</table>
				</td>
				<td>
					<c:if test="${! empty searchRouteForm && searchRouteForm.result ne null}">
						<img alt="Route Map" src='<c:out value="${searchRouteForm.result.map}"/>'>
					</c:if>
				</td>
			</tr>
		</table>
	</html:form>
</div>
<script>	
	$(document).ready(function(){
		$.ajax({
			type: "GET",
			url: "/rest/search/stop", // change to full path of file on server
			dataType: "xml",
			data : {
				searchStr : $('#fromStr').val() 
			},
			success: function(xml){
				$(xml).find("stop").each(function(){
					fromArr.push(new stop($(this).attr("label"), $(this).attr("value")));
				});
			},
			complete: function(){
				$("input#fromStr").autocomplete({
					source: fromArr,
					minLength: 1,
					select: function(event, ui) {
						$("#from").val(ui.item.id);
						$("input#fromStr").val(ui.item.label);
						$("input#fromStr").flushCache(); 
					},
					cacheLength: 0
				});
			},
			formatItem: function(row){
				alert(row);
			},
			failure: function(data) {
				alert("XML File could not be found");
			}
		});
		$.ajax({
			type: "GET",
			url: "/rest/search/stop", // change to full path of file on server
			dataType: "xml",
			data : {
				searchStr : $('#toStr').val() 
			},
			success: function(xml){
				$(xml).find("stop").each(function(){
					toArr.push(new stop($(this).attr("label"), $(this).attr("value")));
				});
			},
			complete: function(){
				$("input#toStr").autocomplete({
					source: toArr,
					minLength: 1,
					select: function(event, ui) {
						$("#to").val(ui.item.id);
						$("input#toStr").val(ui.item.label);
						$("input#toStr").flushCache(); 
					},
					cacheLength: 0
				});
			},
			failure: function(data) {
				alert("XML File could not be found");
			}
		});
	});       
</script>